<template>
  <div id="menuConfiguration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <span>工单管理</span>
        </div>
      </template>
      <!-- tabs切换 -->
      <el-tabs v-model="activeName" class="demo-tabs">
        <!-- 修改信息 -->
        <el-tab-pane label="修改信息" name="first">
          <div class="form">
            <el-form :model="form1" label-width="auto" style="max-width: 650px">
              <el-form-item label="用户账号">
                <div class="editCountent-item">
                  <el-input
                    v-model="form1.phone"
                    placeholder="请输入用户完整手机号"
                    clearable
                    @input="changeValue"
                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                    style="width: 400px"
                  />
                  <el-button type="primary" @click="search(1, form1.phone)"
                    >搜索</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="infoShow">
                  <p>高考年份: {{ form1.graduate_time }}年</p>
                  <p>高考省份: {{ form1.province }}</p>
                </div>
              </el-form-item>
              <el-form-item
                label="修改内容"
                prop="editCountent"
                class="editCountent"
              >
                <div class="editCountent-item">
                  <span>高考年份</span>
                  <el-select
                    :popper-options="{
                      modifiers: [
                        { name: 'computeStyles', options: { adaptive: false } },
                      ],
                    }"
                    class="m-2"
                    placeholder="请选择"
                    v-model="form1.graduate_time_change"
                    @change="YearChange"
                  >
                    <el-option
                      v-for="item in yearList"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </div>
                <div class="editCountent-item">
                  <span>高考省份</span>
                  <el-select
                    :popper-options="{
                      modifiers: [
                        { name: 'computeStyles', options: { adaptive: false } },
                      ],
                    }"
                    class="m-2"
                    placeholder="请选择"
                    v-model="form1.pid_change"
                    @change="provinceChange"
                  >
                    <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.provinceName"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div class="editCountent-item">
                  <span>现高几</span>
                  <el-select
                    :popper-options="{
                      modifiers: [
                        { name: 'computeStyles', options: { adaptive: false } },
                      ],
                    }"
                    class="m-2"
                    placeholder="请选择"
                    v-model="form1.grade_change"
                    @change="gradeChange"
                  >
                    <el-option
                      v-for="item in seniorHighSchool"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div style="color: red">
                  修改任何一项信息，都可能会导致已填的志愿表失效！请谨慎操作！如有疑问，请联系客服。
                </div>
              </el-form-item>
              <!-- <el-form-item label="申请原因">
                                <el-input  maxlength="100" placeholder="请输入申请原因" show-word-limit
                                    type="textarea" />
                            </el-form-item>
                            <el-form-item label="相关凭证">
                                <ImageUpload :modelValue="modelValueDateList" :limit="4"
                                    @update:modelValue="modelValuesChange">
                                </ImageUpload>
                            </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="onSubmitOne">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <!-- 修改用户权限 -->
        <el-tab-pane label="修改用户权限" name="second">
          <div class="form">
            <el-form :model="form2" label-width="auto" style="max-width: 600px">
              <el-form-item label="用户账号">
                <div class="editCountent-item">
                  <el-input
                    v-model="form2.phone"
                    placeholder="请输入用户完整手机号"
                    clearable
                    @input="changeValue"
                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                    style="width: 400px"
                  />
                  <el-button type="primary" @click="search(2, form2.phone)"
                    >搜索</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="infoShow">
                  <span>当前权限:</span>
                  <span v-show="form2.isVIP == 1">志愿卡</span>
                  <span v-show="form2.isVIP == 2">升学卡</span>
                  <span v-show="form2.isVIP == 3">体验卡</span>
                  <!-- <p>历史变更次数： 次</p> -->
                </div>
              </el-form-item>
              <el-form-item label="修改内容" prop="permission">
                <div>
                  <span>用户权限</span>
                  <el-select
                    :popper-options="{
                      modifiers: [
                        { name: 'computeStyles', options: { adaptive: false } },
                      ],
                    }"
                    class="permission-select"
                    placeholder="请选择"
                    v-model="form2.card_type_change"
                    @change="permissionChange"
                  >
                    <el-option label="志愿卡" value="1" />
                    <el-option label="升学卡" value="2" />
                    <el-option label="体验卡" value="3" />
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitTwo">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <!-- 修改成绩/位次 -->
        <el-tab-pane label="修改成绩/位次" name="third">
          <div class="form">
            <el-form :model="form3" label-width="auto" style="max-width: 650px">
              <el-form-item label="用户账号">
                <div class="editCountent-item">
                  <el-input
                    v-model="form3.phone"
                    placeholder="请输入用户完整手机号"
                    clearable
                    @input="changeValue"
                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                    style="width: 400px"
                  />
                  <el-button type="primary" @click="search(3, form3.phone)"
                    >搜索</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="infoShow">
                  <p>
                    当前成绩: {{ form3.score || '-' }}分
                    {{ form3.section || '-' }}位 {{ form3.sgname }}
                  </p>
                  <!-- <p>历史变更次数: 次</p> -->
                </div>
              </el-form-item>
              <el-form-item
                label="修改内容"
                prop="editCountent"
                class="editCountent"
              >
                <div class="editCountent-item">
                  <span>省份</span>
                  <span>{{ form3.province || '暂无信息' }}</span>
                </div>
                <div class="editCountent-item">
                  <span>分数</span>
                  <el-input
                    placeholder="请输入分数"
                    v-model="form3.score_change"
                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                  />
                </div>
                <div class="editCountent-item">
                  <span>位次</span>
                  <el-input
                    placeholder="请输入位次"
                    v-model="form3.section_change"
                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                  />
                </div>

                <div style="color: red">
                  修改任何一项信息，都可能会导致已填的志愿表失效！请谨慎操作！如有疑问，请联系客服。
                </div>
              </el-form-item>

              <el-form-item :label="data.title" v-for="(data, index) in xkdata">
                <el-radio-group v-if="data.type == 1" v-model="form3.radio">
                  <el-radio
                    :label="title"
                    v-for="(id, title, index) in data.item"
                    :key="index"
                  />
                </el-radio-group>
                <el-checkbox-group
                  v-else
                  v-model="form3.checkbox"
                  :max="data.number"
                >
                  <el-checkbox
                    :label="title"
                    v-for="(id, title, index) in data.item"
                    :key="index"
                  />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitThree"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { userInfo, userVipSave, getProvinceList } from '@/api/appv2/appv2';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form1 = ref({});
const form2 = ref({});
const form3 = ref({});
const activeName = ref('first');
// 省份
const provinceList = ref([]);
// 年份
const yearList = ref(['2024', '2025', '2026', '2027', '2028', '2029']);
// 高几
const seniorHighSchool = ref([
  { name: '高一', id: 1 },
  { name: '高二', id: 2 },
  { name: '高三', id: 3 },
]);
const xkdata = ref({}); // 选科科类信息

function getCityList() {
  getProvinceList().then((res) => {
    provinceList.value = res.data;
  });
}
getCityList();

function YearChange(val) {
  form1.graduate_time_change = val;
}
function provinceChange(val) {
  form1.pid_change = val;
}
function gradeChange(val) {
  form1.grade_change = val;
}
function permissionChange(val) {
  form2.card_type_change = val;
}
function changeValue() {
  form1.value.graduate_time = '';
  form1.value.province = '';

  form2.value.isVIP = '';

  form3.value.score = '';
  form3.value.section = '';
  form3.value.sgname = '';
}

// 查询
function search(type, val) {
  userInfo({ phone: val }).then((res) => {
    if (res.code == 20000) {
      if (type == 1) {
        form1.value = res.data;
      } else if (type == 2) {
        form2.value = res.data;
      } else if (type == 3) {
        form3.value = res.data;
        if (form3.value.xk_type == '1') {
          xkdata.value = [
            {
              type: '1', // 1-单选，2-多选
              title: '选考科目',
              item: {
                文科: '22',
                理科: '11',
              },
            },
          ];
        } else if (form3.value.xk_type == '2') {
          xkdata.value = [
            {
              type: '2',
              number: '3',
              title: '选考科目',
              item: {
                物理: '1',
                化学: '2',
                生物: '3',
                政治: '6',
                历史: '4',
                地理: '5',
              },
            },
          ];
        } else {
          xkdata.value = [
            {
              // 单选
              type: '1',
              title: '首选科目',
              item: {
                物理: '1',
                历史: '4',
              },
            },
            {
              // 双选
              type: '2',
              number: '2',
              title: '再选科目',
              item: {
                化学: '2',
                生物: '3',
                政治: '6',
                地理: '5',
              },
            },
          ];
        }
      }
    }
  });
}
// 修改信息
function onSubmitOne() {
  const data = {
    type: '3',
    phone: form1.value.phone,
    graduate_time: form1.graduate_time_change,
    pid: form1.pid_change,
    grade: form1.grade_change,
    province: provinceList.value.filter((v) => v.id == form1.pid_change)[0]
      .provinceName,
  };
  userVipSave(data).then((res) => {
    if (res.code == 20000) {
      ElMessage.success(res.msg);
      form1.value = {};
    } else {
      ElMessage.error(res.msg);
    }
  });
}
// 修改用户权限
function onSubmitTwo() {
  const data = {
    type: '1',
    phone: form2.value.phone,
    card_type: form2.card_type_change,
  };
  userVipSave(data).then((res) => {
    if (res.code == 20000) {
      ElMessage.success(res.msg);
      form2.value = {};
    }
  });
}
// 修改成绩/位次
function onSubmitThree() {
  let xkInfos = {};
  xkdata.value.forEach((item) => {
    xkInfos = { ...xkInfos, ...item.item };
  });

  if (form3.value.radio?.length > 0) {
    if (form3.value.checkbox) {
      form3.value.checkbox.unshift(form3.value.radio);
    } else {
      form3.value.checkbox = [form3.value.radio];
    }
  }

  let xkIds = [];
  form3.value.checkbox.forEach((item) => {
    xkIds.push(xkInfos[item]);
  });
  xkIds = [...new Set(xkIds)];

  const data = {
    type: '2',
    phone: form3.value.phone,
    score: form3.value.score_change,
    section: form3.value.section_change,
    course: form3.value.radio,
    sgid: xkIds,
    sgname: [...new Set(form3.value.checkbox)].map((item) => item[0]).join('/'),
  };
  if (form3.value.xk_type == 2) {
    data.course = '综合';
  }
  userVipSave(data).then((res) => {
    if (res.code == 20000) {
      ElMessage.success(res.msg);
      form3.value = {};
    }
  });
}
</script>

<style lang="scss" scoped>
::v-deep(.el-tabs__item) {
  font-size: 22px;
  font-weight: 600;
}

.form {
  margin: 30px 0 0 30px;

  .infoShow {
    width: 380px;
    background: #f7f8fa;
    border-radius: 4px;
    padding: 18px;
    margin-left: 70px;
  }

  p,
  span {
    font-size: 14px;
    color: #86909c;
    padding-left: 20px;
  }

  .permission-select {
    margin-left: 30px;
  }

  ::v-deep(.el-textarea__inner) {
    height: 100px;
  }

  ::v-deep(.el-form-item__content) {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .editCountent-item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;

    span {
      width: 140px;
    }
  }
}

.el-form-item--default {
  margin-bottom: 50px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }
}
</style>
